<template>
  <div class="mm">
    <img src="../assets/upload/bg.png" />
    <div class="register">
      <h1>您好，欢迎登录</h1>
      <el-form>
        <el-form-item>
          <i class="user"></i>
          <input placeholder="请输入账号" v-model="formLogin.username" />
        </el-form-item>
        <el-form-item>
          <i class="password"></i>
          <input :type="pwdType" placeholder="请输入密码" v-model="formLogin.password" />
          <span :class="eyes ? icon1 : icon2" @click="yanjing"></span>
        </el-form-item>
        <el-form-item prop="code" class="yz">
          <el-input
            type="text"
            @keyup.enter.native="doLogin('formLogin')"
            v-model="formLogin.code"
            placeholder="- - - -"
          >
            <template slot="prepend">验证码</template>
            <template slot="append">
              <div class="login-code" @click="refreshCode">
                <Identify :identifyCode="identifyCode"></Identify>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="doLogin('formLogin')">登录</el-button>
        </el-form-item>
        <el-form-item class="forget">
          <span>忘记密码?</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Identify from "./common/identify.vue";

export default {
  components: {
    Identify
  },

  data: () => ({
    formLogin: {
      username: "",
      password: "",
      code: "",
    },
    // 输入框类型
    pwdType:'password',
    // 小眼睛
      eyes:"",
      icon1:'icon1',
      icon2:'icon2',
    identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
    identifyCode: "",
    // 校验
    rules: {
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
    }
  }),
  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 鼠标按下enter键
    // onSubmit() {
    //   console.log(11);
      
    // },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 点击登录
    doLogin(formLogin) {
      if (!this.formLogin.username || !this.formLogin.password) {
        this.dialog = true;
        return false;
      }
      if (
        this.formLogin.code.toLowerCase() !== this.identifyCode.toLowerCase()
      ) {
        this.$message.error("请填写正确验证码");
        this.refreshCode();
        return;
      }
      this.$axios
        .post("/userApi/login/users", {
          username: this.formLogin.username,
          password: this.formLogin.password
        })
        .then(res => {
          var data = res.data;
          if (data.status == "ok") {
            this.$router.push({ path: "/index", query: { token: data.token } });
          } else {
            this.$message.info(data.msg);
            this.loading = false;
          }
        });
    },
    // 眼睛
    yanjing() {
      this.pwdType = this.pwdType == 'password' ? 'text' :'password'
      this.eyes = !this.eyes
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.mm {
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
.register {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  width: 600px;
  height: 400px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 8px 24px 0px rgba(63, 81, 181, 0.3);
}
.register h1 {
  font-size: 32px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
  text-align: center;
  color: #3f51b5;
  margin-top: 40px;
}
.el-input {
  border: 0;
}
i {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.user {
  background: url("../assets/img/user.png") no-repeat;
  background-size: 24px;
}
.password {
  background: url("../assets/img/password.png") no-repeat;
  background-size: 24px;
}
.el-form {
  position: relative;
  padding: 0 120px;
}
input {
  font-size: 16px;
  padding: 7px;
  padding-left: 20px;
  margin-left: 4px;
  width: 290px;
  outline: none;
  border: 0;
  color: #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
}
.el-form-item:nth-child(1) {
  margin-bottom: 35px;
}
.el-form-item:nth-child(2) {
  margin-bottom: 0;
}
.icon1 {
  position: absolute;
  background: url("../assets/img/eye.png") no-repeat;
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
  top: 15px;
  right: 20px;
}
.icon2 {
  position: absolute;
  background: url("../assets/img/eyes.png") no-repeat;
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
  top: 15px;
  right: 20px;
}
h3 {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #bdbdbd;
  vertical-align: middle;
}
.yz {
  margin: 0;
  width: 310px;
}
.el-form-item__content {
  font-size: 20px;
}
.el-form-item img {
  width: 102px;
  height: 32px;
  vertical-align: middle;
}
.btn {
  text-align: center;
  margin-top: 20px;
}
.el-button {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border: 0;
  font-size: 24px;
}
.forget {
  color: #ff3c00;
  font-size: 16px;
  position: absolute;
  bottom: -35px;
  right: 123px;
}
.el-form {
  margin-top: 30px;
}
.yz {
  margin-top: 20px;
  margin-left: 35px;
}
</style>
